<template>
  <view class="container">
    <!-- 顶部组件 -->
    <u-navbar
      id="nav-bar"
      :is-back="false"
      :showBackIcon="false"
      :background="{ background: 'transparent' }"
      :border-bottom="false"
      title="实名认证"
    >
    </u-navbar>

    <image
      class="bg"
      src="/static/images/icon-realNameAuthentication.png"
      mode="widthFix"
    ></image>

    <view class="content">
      <view class="stepBox">
        <u-steps :list="infoList" :current="current"></u-steps>
      </view>

      <template v-if="current === 0">
        <view class="formBox">
          <u-form :model="formModel" ref="uForm" :label-width="280">
            <u-form-item label="身份证拍照(人像面)">
              <u-upload
                ref="back"
                :action="action"
                :max-count="1"
                :auto-upload="true"
                :custom-btn="true"
                width="285"
                height="205"
                class="float-right"
                @on-uploaded="onUploadedBusinessLicense"
                @on-remove="onRemoveBusinessLicense"
              >
                <view
                  slot="addBtn"
                  class="slot-btn"
                  hover-class="slot-btn__hover"
                  hover-stay-time="150"
                >
                  <image
                    class="customBtn"
                    :src="`${
                      formModel.idCardFront
                        ? 'https://file.diqihengrun.com/image' + formModel.idCardFront
                        : '/static/images/icon-rx.png'
                    } `"
                  ></image>
                </view>
              </u-upload>
            </u-form-item>
            <u-form-item label="身份证拍照(国徽面)">
              <u-upload
                ref="back"
                :action="action"
                :max-count="1"
                :auto-upload="true"
                :custom-btn="true"
                width="285"
                height="205"
                class="float-right"
                @on-uploaded="onUploadedBusinessLicense"
                @on-remove="onRemoveBusinessLicense"
              >
                <view
                  slot="addBtn"
                  class="slot-btn"
                  hover-class="slot-btn__hover"
                  hover-stay-time="150"
                >
                  <image
                    class="customBtn"
                    :src="`${
                      formModel.idCardBack
                        ? 'https://file.diqihengrun.com/image' + formModel.idCardBack
                        : '/static/images/icon-gh.png'
                    } `"
                  ></image>
                </view>
              </u-upload>
            </u-form-item>
            <u-form-item label="姓名">
              <u-input
                v-model="formModel.corporateName"
                :disabled="disabled"
                inputAlign="right"
                placeholder="上传后自动返显"
              />
            </u-form-item>
            <u-form-item label="身份证号">
              <u-input
                v-model="formModel.idNumber"
                :disabled="disabled"
                inputAlign="right"
                placeholder="上传后自动返显"
              />
            </u-form-item>
            <u-form-item border-bottom="false" label="证件有效期">
              <u-input
                v-model="formModel.certificateValidPeriod"
                :disabled="true"
                inputAlign="right"
                placeholder="上传后自动返显"
              />
            </u-form-item>
          </u-form>
        </view>
        <view class="agreement">
          <view class="agreement-in">
            <u-checkbox
              v-model="check"
              size="30rpx"
              active-color="#C5A27F"
              label-disabled
              @change="checkboxChange"
            >
              <view class="agreement-text">
                我已阅读并同意<text>《随行实名认证协议》</text>
              </view>
            </u-checkbox>
          </view>
        </view>
      </template>

      <template v-if="current === 1">
        <view class="formBox">
          <u-form :model="formModel" ref="uForm" :label-width="280">
            <u-form-item label="结算卡正面(数字面)">
              <u-upload
                ref="settlementCardFrontRef"
                :action="action"
                :max-count="1"
                :auto-upload="true"
                :custom-btn="true"
                width="285"
                height="205"
                class="float-right"
                @on-uploaded="onUploadedBusinessLicense"
                @on-remove="onRemoveBusinessLicense"
              >
                <view
                  slot="addBtn"
                  class="slot-btn"
                  hover-class="slot-btn__hover"
                  hover-stay-time="150"
                >
                  <image
                    class="customBtn"
                    :src="`${
                      formModel.settlementCardFront
                        ? 'https://file.diqihengrun.com/image' +
                          formModel.settlementCardFront
                        : '/static/images/icon-jskzm.png'
                    } `"
                  ></image>
                </view>
              </u-upload>
            </u-form-item>

            <u-form-item label="卡号">
              <u-input
                v-model="formModel.bankCardNumber"
                :disabled="disabled"
                inputAlign="right"
                placeholder="上传后自动返显"
              />
            </u-form-item>

            <u-form-item label="发卡行" :border-bottom="false">
              <u-input
                v-model="formModel.accountOpeningSubBranch"
                :disabled="true"
                inputAlign="right"
                placeholder="上传后自动返显"
              />
            </u-form-item>

            <u-form-item label="开户地点">
              <u-input
                v-model="formModel.accountOpeningCity"
                :disabled="true"
                inputAlign="right"
                placeholder="请选择开户地点"
                @click="handleRegionPicker('accountOpeningCity')"
              />
              <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>

            <u-form-item label="银行预留手机号" :border-bottom="false">
              <u-input
                v-model="formModel.phone"
                :disabled="true"
                inputAlign="right"
                placeholder="请输入银行预留手机号"
              />
            </u-form-item>
          </u-form>
        </view>
      </template>

      <template v-if="current === 2">
        <view class="formBox">
          <u-form :model="formModel" ref="uForm" :label-width="280">
            <u-form-item label=" " :border-bottom="false">
              <view slot="label" class="item-label">
                <text class="label1">电子协议</text>
                <text class="label2"> 生成电子协议</text
                ><text class="label3"> 签署并上传电子协议</text></view
              >
              <u-upload
                ref="back"
                :action="action"
                :max-count="1"
                :auto-upload="true"
                :custom-btn="true"
                width="285"
                height="205"
                class="float-right"
                @on-uploaded="onUploadedBusinessLicense"
                @on-remove="onRemoveBusinessLicense"
              >
                <view
                  slot="addBtn"
                  class="slot-btn"
                  hover-class="slot-btn__hover"
                  hover-stay-time="150"
                >
                  <image
                    class="customBtn"
                    :src="`${
                      formModel.agreement
                        ? 'https://file.diqihengrun.com/image' + formModel.agreement
                        : '/static/images/icon-agreement.png'
                    } `"
                  ></image>
                </view>
              </u-upload>
            </u-form-item>
          </u-form>
        </view>
      </template>
    </view>

    <view class="bottom">
      <view v-if="current > 0" class="preBtn" @click="handlePre">上一步</view>
      <view v-if="current < 2" class="nextBtn" @click="handleNext">下一步</view>
    </view>

    <u-picker
      v-model="showPicker"
      mode="time"
      :params="params"
      @confirm="timeConfirm"
    ></u-picker>

    <u-picker
      v-model="showRegionPicker"
      mode="region"
      @confirm="regionConfirm"
    ></u-picker>

    <u-picker
      mode="selector"
      v-model="showSubBranch"
      :default-selector="[0]"
      :range="subBranchRange"
      @confirm="subBranchConfirm"
    ></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      infoList: [
        {
          name: '基础信息',
        },
        {
          name: '结算信息',
        },
        {
          name: '协议签署',
        },
      ],
      disabled: false,
      list: [],
      current: 0,
      check: false,
      formModel: {
        idCardFront: '',
        idCardBack: '',
        corporateName: '',
        idNumber: '',
        certificateValidPeriod: '',

        settlementCardFront: '',
        bankCardNumber: '',
        accountOpeningCity: '',
        AccountOpeningSubBranch: '',
        phone: '',
        agreement: '',
      },
      action: '',
      showPicker: false,
      showRegionPicker: false,
      params: {
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false,
      },
      fromItem: '',
      showSubBranch: false,
      subBranchRange: [1, 2, 3],
    };
  },
  onLoad: function (options) {
    this.getData(0);
  },
  methods: {
    getData(index) {},
    subsectionChange(index) {
      this.subsectionIndex = index;
      this.getData(index);
    },
    onUploadedBusinessLicense(lists, name) {
      let filePath = lists[0].response.data[0].filePath;
      this.formModel.businessLicense = filePath;
    },
    onRemoveBusinessLicense(index, lists, name) {
      this.formModel.businessLicense = '';
    },
    handleNext() {
      this.current++;
    },
    handlePre() {
      this.current--;
    },
    handleDatePicker(from) {
      this.fromItem = from;
      this.showPicker = true;
    },
    timeConfirm(value) {
      const { year, month, day } = value;
      this.formModel[this.fromItem] = `${year}-${month}-${day}`;
    },
    handleRegionPicker(from) {},
    regionConfirm(value) {},
    handleAccountOpeningSubBranch() {
      this.showSubBranch = true;
    },
    subBranchConfirm(value) {},
    checkboxChange(value) {},
  },
};
</script>
<style lang="scss" scope>
.container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 0 0 120rpx;
  background-color: #f5f5f5;
  box-sizing: border-box;
  .bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
  }

  .segmentedBox {
    position: absolute;
    top: 10rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 300rpx;
    z-index: 99;
  }
}

.content {
  position: relative;
  width: 100%;
  padding: 220rpx 30rpx 60rpx;
}

.stepBox {
  width: 100%;
  padding: 30rpx;
  background: #ffffff;
  border-radius: 20rpx;
}

.formBox {
  margin-top: 30rpx;
  width: 100%;
  padding: 30rpx 30rpx 10rpx;
  background: #ffffff;
  border-radius: 20rpx;
  .customBtn {
    width: 174rpx;
    height: 122rpx;
  }
}

.bottom {
  position: fixed;
  bottom: 60rpx;
  left: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 30rpx;

  .preBtn {
    margin-right: 30rpx;
    flex: 1;
    min-width: 0;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 28rpx;
    font-weight: normal;
    color: #fff;
    text-align: center;
    background: linear-gradient(90deg, #d9b189, #c5a27f);
    border-radius: 20rpx;
  }

  .nextBtn {
    flex: 1;
    min-width: 0;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 28rpx;
    font-weight: normal;
    color: #fff;
    text-align: center;
    background: linear-gradient(90deg, #332108, #201403);
    border-radius: 20rpx;
  }
}

.agreement {
  margin-top: 40rpx;
  width: 100%;
  z-index: 99;
  .agreement-in {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    text-align: left;
  }
  .agreement-text {
    color: #999393;
    font-size: 24rpx;
    font-weight: 500;
    line-height: 1;
    text {
      color: #b7926e;
    }
  }
}

.item-label {
  width: 280rpx;
  line-height: 1.5;
  font-weight: 400;
  font-size: 28rpx;
  .label1 {
    color: #333333;
  }
  .label2 {
    color: #b7926e;
  }
  .label3 {
    color: #999999;
  }
}

.float-right {
  float: right;
}
</style>
